<template>
  <div class="cameraListWrap">
    <div class="cameraHeader">
      <div class="searchCamera">
        <span>搜索摄像头</span>
        <input type="text" class="searchCameraInput">
        <span class="btnSearch">搜索</span>
      </div>
      <div class="handlePanel">
        <span class="saveBtn">保存</span>
        <span class="cancelBtn">取消</span>
      </div>
    </div>
    <div class="cameraData">
      <ul class="cameraUl">
        <li class="cameraLi" v-for="camera in cameraList" :key="camera.id">
          <input type="checkbox" :id="camera.id" :value="camera.id" v-model="checkedCamera">
          <label :for="camera.id" class="cameraItem">
            <img :src="camera.previewPic" alt="">
            <p>{{camera.name}}</p>
          </label>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'cameraList',
  data () {
    return {
      checkedCamera: [],
      cameraList: [{
        previewPic: require('../../assets/images/mapIconTest/test1.jpg'),
        name: '江南街道104号',
        id: 'cameraId1'
      }, {
        previewPic: require('../../assets/images/mapIconTest/test2.jpg'),
        name: '江南街道104号',
        id: 'cameraId2'
      }, {
        previewPic: require('../../assets/images/mapIconTest/test3.jpg'),
        name: '江南街道104号',
        id: 'cameraId3'
      }, {
        previewPic: require('../../assets/images/mapIconTest/test4.jpg'),
        name: '江南街道104号',
        id: 'cameraId4'
      }, {
        previewPic: require('../../assets/images/mapIconTest/test5.jpg'),
        name: '江南街道104号',
        id: 'cameraId5'
      }, {
        previewPic: require('../../assets/images/mapIconTest/test1.jpg'),
        name: '江南街道104号',
        id: 'cameraId6'
      }]
    }
  },
  methods: {
    cameraInit () {
    }
  },
  mounted () {
  }
}
</script>
<style rel="stylesheet/less" lang="less">
.cameraListWrap {
  background: #3f4249;
  border: 1px solid #03d8f8;
  .cameraHeader {
    padding: 20px 20px;
    color: #fff;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    .searchCamera {
      float: left;
      >span {
        float: left;
        line-height: 30px;
      }
      .searchCameraInput {
        float: left;
        border: none;
        height: 30px;
        margin: 0 0 0 20px;
      }
      .btnSearch {
        background-color: #14abe8;
        padding: 0 20px;
      }
    }
    .handlePanel {
      float: right;
      .saveBtn {
        float: left;
        display: block;
        height: 30px;
        width: 70px;
        background-color: #14abe8;
        border-radius: 15px;
        margin-right: 20px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
      }
      .cancelBtn {
        float: left;
        display: block;
        height: 30px;
        width: 70px;
        background-color: #3f4249;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #5390a3;
        cursor: pointer;
      }
      >span {
      }
    }
  }
  .cameraData {
    width: 100%;
    .cameraUl {
      list-style: none;
      padding: 0 20px;
      .cameraLi {
        float: left;
        width: 30%;
        background: red;
        margin: 10px 0;
        margin-right: 5%;
        &:nth-child(3n) {
          margin-right: 0;
        }
        >input {
          display: none;
        }
        .cameraItem {
          background: red;
          color: #fff;
          text-align: center;
          >img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
